<template>
    <div class="plantBox">
       <!-- 专家列表 -->
       <div class="contains">
           <div class="tabs">
             <div v-for="item in typeList" :key="item.type" class="li-item" @click="tabsClick(item)" :class="showMsg.type==item.type?'checked':''">{{ item.type }}</div>
           </div>
           <div class="amins" v-if="shows">
            <div v-for="item in showMsg.data" :key="item.id" class="item" @click="itemClick(item)">
               <img :src="item.headImg" alt="">
               <div class="names">{{ item.name }}</div>
            </div>
           </div>
           <div class="amins" v-else>
                 <div class="check-name">
                    <img :src="showName.headImg" alt="">
                    <div class="names">{{ showName.name }}</div>
                 </div>
                 <div class="check-truduce" v-html="showName.introduce"></div>
           </div>
           <div>

           </div>
       </div>
   </div>
   </template>
   <script>
   export default {
       data() {
           return {
               typeList:[
                {type:'果业中心技术人员',data:[]},
                {type:'西农专家',data:[]},
                {type:'院士',data:[]},
                {type:'技术工程师',data:[]},
                {type:'农民',data:[]},
                ],
               shows:true,
               lists:[],
               showMsg:{},
               showName:{}
           }
       },
       mounted() {
        this.getData()
       },
       methods:{
       async getData(){
            let {data:res} = await this.$https.get('plant/iot/getAllExpert ')
            
            if(res.code!=200)return
            res.data.forEach(v=>{
                this.typeList.forEach(m=>{
                    if(v.type==m.type)m.data.push(v)
                })
            })
            this.lists = res.data,
            this.showMsg=this.typeList[0]
            this.showName=this.typeList[0].data[0]
            console.log(this.typeList)
        },
        tabsClick(item){
            this.shows=true
            this.showMsg=item
        },
        itemClick(item){
            this.shows=false
            this.showName=item
        }
       }
   }
   </script>
   <style lang="less" scoped>
   .plantBox{
       width: 100%;
       height: 100%;
       display: flex;
       flex-direction: column;
       .contains{
             width: 100%;
             display: flex;
             flex: 1;
             .tabs{
                width: 200px;
                height: 100%;
                color: #fff;
                font-weight: 600;
                text-align: center;
                border-right: 1px solid #fff;
                padding: 0 10px;
                .li-item{
                    cursor: pointer;
                    background: #19251D;
                    border-radius: 4px;
                    margin: 10px 0;
                    padding: 10px 0;
                }
                .checked{
                    background: linear-gradient(90deg, rgba(0,0,0,0) 0%, #3BDD75 100%) #285F3A;
                } 
            }
            .amins{
                flex: 1;
                color: #fff;
                padding: 10px;
                display: flex;
                flex-wrap: wrap;
                gap: 10px;
                .item{
                    width: 130px;
                    height: 180px;
                    cursor: pointer;
                    position: relative;
                    .names{
                        width: 100%;
                        text-align: center;
                        position: absolute;
                        bottom: 0;
                        left: 0;
                        font-size: 14px;
                        background: rgba(25, 37, 29, 0.6);
                    }
                    img{
                        display: block;
                        width: 100%;
                        height: 100%;
                        border-radius: 5px;
                    }
                }
                .check-name{
                    width: 110px;
                    height: 140px;
                    position: relative;
                    margin: 0 20px;
                    .names{
                        width: 100%;
                        text-align: center;
                        position: absolute;
                        bottom: 0;
                        left: 0;
                        font-size: 14px;
                        background: rgba(25, 37, 29, 0.6);
                    }
                    img{
                        display: block;
                        width: 110px;
                        height: 140px;
                        border-radius: 5px;
                    }
                }
                .check-truduce{
                    padding: 10px;
                    flex: 1;
                    height: 100%;
                    overflow-y: auto;
                    background: #040F07;
                    border-radius: 6px;
                    border: 1px solid rgba(59,221,117,0.3);
                }
            }
       }
      
   
   }
   
   </style>